import React from 'react';
//import ReIcon from '../ReIcon';
import ReIconButton from '../ReIconButton';
import classnames from 'classnames';

export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        label: React.PropTypes.string,
        editLabel: React.PropTypes.string,
        disabledLabel: React.PropTypes.string,
        enabledLabel: React.PropTypes.string,
        time: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number
        ]),
        onLabelChange: React.PropTypes.func,
        onDisabledToggleClick: React.PropTypes.func,
        onCheckedToggleClick: React.PropTypes.func,
        onEditToggleClick: React.PropTypes.func
    };

    static defaultProps = {
        isDisabled: false,
        isChecked: false,
        isEdit: false
    }


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            label: props.label,
            time: props.time,
            isDisabled: props.isDisabled,
            isChecked: props.isChecked,
            isEdit: props.isEdit,
            disabled: true
        };
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillReceiveProps({ isChecked }) {
        this.setState({
            isChecked
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleDisabledToggleClick = (event) => {
        event.stopPropagation();
        let isDisabled = this.state.isDisabled
        this.setState({
            isDisabled: !isDisabled
        });

        if (!isDisabled) {
            this.setState({
                disabled: true
            });
            this.setState({
                isEdit: false
            });
        }

        this.props.onDisabledToggleClick && this.props.onDisabledToggleClick(!isDisabled);
    }

    handleEditToggleClick = (event) => {
        event.stopPropagation();
        if (this.state.isDisabled) return;
        let isEdit = this.state.isEdit;
        this.setState({
            isEdit: !isEdit,
            disabled: isEdit
                // isChecked: false
        });

        this.props.onEditToggleClick && this.props.onEditToggleClick(!isEdit)
    }

    handleCheckedToggleClick = () => {
        if (this.state.isDisabled || this.state.isEdit) return;

        // let isChecked = this.state.isChecked;
        // this.setState({
        //     isChecked: !isChecked
        // });

        // this.props.onCheckedToggleClick && this.props.onCheckedToggleClick(!isChecked)
        this.props.onCheckedToggleClick && this.props.onCheckedToggleClick()
    }

    handleChange = (e) => {
        var label = e.target.value;
        this.setState({
            label
        });

        this.props.onLabelChange && this.props.onLabelChange(label);
    }

    render() {
        const classNames = classnames({
            'orin-sw-reeditbar-root': true,
            [this.props.className]: this.props.className ? true : false,
            'disabled': this.state.isDisabled
        });
        let editClassNames = classnames({
            'edit': this.state.isEdit,
            'checked': this.state.isChecked
        })
        let icon = this.state.isDisabled ? 'yincang' : 'yanjing';
        let label = this.state.isDisabled ? this.props.enabledLabel : this.props.disabledLabel;


        return (
            <div className={ classNames } >
                <dl className={ editClassNames } onClick={ this.handleCheckedToggleClick }>
                    <dd className="icon-left" onClick={ this.handleDisabledToggleClick }>
                        <ReIconButton icon={ icon } tooltip={ label } type="bottom" />
                    </dd>
                    <dt>
                        <input  
                            type="text"
                            value={ this.state.label }
                            disabled={ this.state.disabled }
                            onChange={ this.handleChange }
                        />
                    </dt>
                    <dd className="time">
                        <time>{ this.props.time }</time>
                    </dd>
                    <dd className="icon-right" onClick={ this.handleEditToggleClick }>
                        <ReIconButton icon="bianji"  tooltip={this.props.editLabel} type="bottom" />
                    </dd>
                </dl>
            </div>
        );
    }
}
